<template>
    <div>
        <h2>用户反馈表单</h2>

        <!-- 姓名输入 -->
        <label for="name">姓名：{{ Users.name }}</label>
        <input id="name" type="text" placeholder="请输入您的姓名" v-model="Users.name" />

        <!-- 反馈类型选择 -->
        <label for="feedback-type">反馈类型：{{ jisuanleixing(Users) }}</label>
        <select id="feedback-type" v-model="Users.leixing">
            <option value="">请选择反馈类型</option>
            <option value="complaint">投诉</option>
            <option value="suggestion">建议</option>
            <option value="other">其他</option>
        </select>

        <!-- 反馈详情 -->
        <label for="details">反馈详情：{{ Users.xiangqing }}</label>
        <textarea id="details" placeholder="请输入您的反馈内容" v-model="Users.xiangqing" @input="checkLength"></textarea>
        <p>剩余字符：{{ jisuanzifu }}</p>

        <!-- 邮件通知 -->
        <p>是否同意接受邮件通知？</p>
        <label>
            <input type="radio" name="email-notify" value="yes" v-model="Users.YN"> 是
        </label>
        <label>
            <input type="radio" name="email-notify" value="no" v-model="Users.YN"> 否
        </label>

        <!-- 提交按钮 -->
        <button @click="tijiao">提交反馈</button>

        <!-- 提交结果展示 -->
        <div v-show="isOK" v-for="item in Users1" :key="item.id">
            <h3>反馈详情{{ item.id }}</h3>
            <p>姓名：{{ item.name }}</p>
            <p>反馈类型：{{ jisuanleixing(item) }}</p>
            <p>反馈内容：{{ item.xiangqing }}</p>
            <p>是否同意接收通知：{{ YesorNo(item) }}</p>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { computed, ref } from 'vue';

interface IUser {
    id: number,
    name: string,
    leixing: string,
    xiangqing: string,
    YN: string,
}

const isOK = ref(false)
const Users1 = ref<Array<IUser>>([])
const Users = ref<IUser>({
    id: 0,
    name: '',
    leixing: '',
    xiangqing: '',
    YN: '',
})

const jisuanleixing = (user: IUser) => {
    return computed(() => {
        if (user.leixing == 'complaint') {
            return '投诉'
        } else if (user.leixing == 'suggestion') {
            return '建议'
        } else {
            return '其他'
        }
    })
}

const checkLength = () => {
    if (Users.value.xiangqing.length > 100) {
        Users.value.xiangqing = Users.value.xiangqing.substring(0, 100);
    }
};

const jisuanzifu = computed(() => {
    return 100 - Users.value.xiangqing.length
})

const YesorNo = (user: IUser) => {
    return computed(() => {
        if (user.YN == 'yes') {
            return '是'
        } else if (user.YN == 'no') {
            return '否'
        } else {
            return ''
        }
    })
}

const tijiao = () => {
    Users1.value.push(JSON.parse(JSON.stringify(Users.value)))
    isOK.value = true
    Users.value = {
        id: 0,
        name: '',
        leixing: '',
        xiangqing: '',
        YN: '',
    }
    let a = 1;
    for (const e of Users1.value) {
        e.id = a
        a++
    }
}

</script>

<style scoped>
div {
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input[type="text"],
select,
textarea {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

textarea {
    height: 100px;
    resize: none;
}

button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
}

button:hover {
    background-color: #218838;
}

p {
    margin-top: 0;
}

h3 {
    margin-top: 20px;
}

input[type="radio"] {
    margin-right: 5px;
}

.feedback-result {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
}
</style>